<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
  <link rel="shortcut icon" href="../favicon.ico"/>
    <link href="../css/index/index.css" type="text/css" rel="stylesheet">
    <link href="../css/index/iconfont/iconfont.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    	  .order-box {
			  height: 100%;
			  margin: 0;
			}
			 .order-box table {
			  width: 100%;
			  min-width: 390px;
			}
			 .order-box table thead tr {
			  height: 50px;
			  line-height: 50px;
			}
			 .order-box table thead tr td {
			  border-bottom: 2px solid #3d6ba4;
			  border-collapse: collapse;
			  margin: 0;
			  color: #212121;
			  font-size: 12px;
			  font-weight: bold;
			  text-align: left;
			}
			 .order-box table tbody tr {
			  height: 40px;
			  line-height: 40px;
			  font-size: 12px;
			  color: #555555;
			}
			 .order-box table tbody tr:nth-child(2n) {
			  background-color: rgba(85, 85, 85, 0.1);
			}
			 .order-box table td {
			  text-align: left;
			  padding-left: 4px;
			}
			 .order-box table td > div {
			  text-overflow: ellipsis;
			  overflow: hidden;
			  display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 1;
			}
			 .order-box table td .order-status-txt {
			  padding: 4px 8px;
			  border-radius: 2px;
			  color: white;
			  background-color: #333333;
			}
			 .order-box table td .order-status-txt.unpay {
			  background-color: #B42F2D;
			}
			 .order-box table td .order-status-txt.payed {
			  background-color: #AB956D;
			}
			 .order-box table td .order-status-txt.done {
			  background-color: #57AB53;
			}
			 .order-box table td .order-btn {
			  padding: 4px 15px;
			  border-radius: 2px;
			  color: white;
			  background-color: #333333;
			  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
			  cursor: pointer;
			}
			 .order-box table td .order-btn.done {
			  background-color: #57AB53;
			}
			 .order-box table td .order-btn.unstock {
			  background-color: #B42F2D;
			}
			 .order-box table td .order-btn:hover {
			  box-shadow: 0 0 6px #000000;
			}
			 .order-box .load-more,
			 .order-box .no-more {
			  width: 100px;
			  margin: 30px auto;
			  font-size: 12px;
			  text-align: center;
			}
			 .order-box .load-more {
			  padding: 5px 0;
			  cursor: pointer;
			  background-color: #777;
			  border-radius: 5px;
			  color: #fff;
			}
			 .order-box .load-more:hover {
			  background-color: #555;
			}
			 .order-box .no-more {
			  display: none;
			  color: #999;
			}
    </style>
</head>
<body>
<div class="desktop-main">
    <div class="order-box">
        <table cellspacing="0" ng-show="docArr.length>0">
            <thead>
                <tr>
                    <td>订单号</td>
                    <td>商品名称</td>
                    <td>商品总数</td>
                    <td>商品总价格</td>
                    <td>订单状态</td>
                    <td>下单时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="order-table">

            </tbody>
        </table>
        <div class="load-more">点击加载更多</div>
        <div class="no-more">没有更多订单了</div>
    </div>
</div>
</body>
<script src="../js/common.js" type="application/javascript"></script>
<script src="../js/jquery-1.8.2.min.js" type="application/javascript"></script>
<script src="../js/index.js" type="application/javascript"></script>
</html>